<template>
	<view class="" :data-theme="theme" :style="globalColor.style">
		<header-custom title="开通VIP" />
		<view class="container" :style="{'background-color': vipInfo.background}">
			<!-- 
			:style="{'background-color': 'url('+vipInfo.background+')' ; height: sys.screenHeight - sys.navHeight +'px'}" -->
			<view class="rich-text color-36363A font28">
				<view class="" v-html="vipInfo.detailedIntroduce"></view>
			</view>
			<view class="w750 priceBox fboxRow Ycenter Xcenter">
				<view v-for="(item,index) in vipPrice" :key="index" class="flex1 fboxCol Ycenter Xcenter"
					:class="active == item.term ? 'active': 'bg-FFE6CC'" @click="priceTap(item.term)">
					<view class="price font48" v-if="sys.platform == 'ios'">-</view>
					<view class="price font48" v-else>
						<text class="font35">￥</text>
						{{ item.price }}
					</view>
					<view class="tit font24">{{ item.title }}</view>
				</view>
			</view>
			<view class="bottom fboxRow Xbetween Ycenter">
				<view v-if="sys.platform == 'ios'"
					class="w690 button fboxRow Ycenter Xcenter bg-00B356-79DBA8 color-fff">
					IOS暂不支持
				</view>
				<view v-else>
					<view v-if="openId" class="w690 button fboxRow Ycenter Xcenter bg-00B356-79DBA8 color-fff"
						@click="onPay">
						立即开通
					</view>
					<view v-else class="w690 button fboxRow Ycenter Xcenter bg-00B356-79DBA8 color-fff"
						@click="onPayEmpower">
						立即开通
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bksFunctionInfo
	} from '@/api/bks.index'
	import {
		vipListDetail,
		orderPay,
		memberOpenId,
		memberCompletionOpenId
	} from '@/api/bks.mine'
	import {
		appletOpenId
	} from '@/api/bks.login'
	import headerCustom from '@/pagesBKS/components/header-custom.vue';

	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				sys: {},
				vipInfo: {},
				vipPrice: {},
				active: 1,
				isVip: false,
				openId: false
			}

		},
		onLoad: function(options) {
			this.getVipInfo();

			this.sys = uni.getSystemInfoSync();
		},
		methods: {
			getVipInfo() {
				bksFunctionInfo({
					identify: 'PAG0005'
				}).then((res) => {
					res.data.detailedIntroduce = res.data.detailedIntroduce.replace(
						/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;"'
					);
					this.vipInfo = res.data;
				})
				vipListDetail().then((res) => {
					this.vipPrice = res.data;
				});
			},
			priceTap(val) {
				const id = val;
				this.active = id
			},
			// 立即开通
			onPay() {
				const that = this
				orderPay({
					term: this.data.active
				}).then(res => {
					if (res.data) {
						const {
							weChat: {
								timeStamp,
								nonceStr,
								packageValue,
								signType,
								paySign
							}
						} = res.data
						wx.requestPayment({
							timeStamp,
							nonceStr,
							package: packageValue,
							signType,
							paySign,
							success(res) {
								wx.showToast({
									title: '开通成功',
									icon: 'none',
									duration: 2000
								})
								getApp().globalData.userInfo.isVIP = true
								that.setData({
									isVip: true
								})
								wx.navigateBack({
									delta: 1,
									fail: () => {
										// 如果返回上一页没有那么跳转至考生首页
										this.$pageTo('/bks/index/examinee/index',
											'switchTab')
									}
								})
							},
							fail(res) {
								console.log(res);
							}
						})
					} else {
						wx.showToast({
							icon: 'none',
							title: res.msg,
						})
					}
				})
			},
			getOpenId() {
				memberOpenId().then(res => {
					this.openId = res.data
				})
			},
			// 解决从本无名片过来的用户没有openid
			onPayEmpower() {
				console.log('授权并开通')
				// wx.login({
				// 	success: res => {
				// 		appletOpenId({
				// 			code: res.code
				// 		}).then(res => {
				// 			memberCompletionOpenId({
				// 				openId: res.data.opendId,
				// 				unionId: res.data.unionId
				// 			}).then(res => {
				// 				if (res.data) {
				// 					this.onPay()
				// 				} else {
				// 					wx.showToast({
				// 						icon: 'none',
				// 						title: '授权购买失败'
				// 					})
				// 				}
				// 			})
				// 		})
				// 	}
				// });
			},
		}
	};
</script>

<style scoped lang="scss">
	.container {
		min-height: calc(100vh);
	}

	.container .rich-text {
		line-height: 50rpx;
	}

	.bg-FFE6CC {
		background-color: #ffe6cc;
	}

	.priceBox {
		padding: 0 15rpx;
	}

	.priceBox .price {
		color: #fa4d49;
	}

	.priceBox .tit {
		margin-top: 20rpx;
		color: #000;
	}

	.priceBox .flex1 {
		margin: 0 15rpx;
		padding: 35rpx 0 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ffe6cc;
	}

	.priceBox .flex1.active {
		background-color: #fffdeb;
		border: 2rpx solid #f76b67;
	}

	.container .bottom {
		width: 100%;
		height: 84rpx;
	}

	.container .bottom .button {
		position: fixed;
		left: 30rpx;
		bottom: 40rpx;
		height: 84rpx;
		border-radius: 8rpx;
	}
</style>